<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="90px" :class="styles['register-form']" size="large">
    <el-form-item prop="username" label="用户名: ">
      <el-input v-model="form.username" type="text" auto-complete="off" placeholder="请输入用户名" clearable :prefix-icon="User"/>
    </el-form-item>
    <el-form-item prop="iphone" label="手机号: ">
      <el-input v-model="form.iphone" type="text" auto-complete="off" placeholder="请输入手机号" clearable :prefix-icon="Iphone"/>
    </el-form-item>
    <el-form-item prop="password" label="密码: ">
      <el-input v-model="form.password" type="password" auto-complete="off" placeholder="请输入密码" clearable show-password :prefix-icon="Lock"/>
    </el-form-item>
    <el-form-item prop="againPassword" label="确认密码: ">
      <el-input v-model="form.againPassword" type="password" auto-complete="off" placeholder="请再一次输入密码" clearable show-password :prefix-icon="CircleCheck"/>
    </el-form-item>
    <div class="ato-flex-center ato-mb-16">
      <el-button :loading="loading" type="primary" class="ato-w160" @click="handleRegister">{{ loading ? '注册中...' : '注册'}}</el-button>
    </div>
  </el-form>
</template>

<script setup name="Register">
import {reactive, ref} from 'vue'
import { Lock, User, Iphone, CircleCheck } from '@element-plus/icons-vue'

const emit = defineEmits(['change'])

const loading = ref(false) // 注册按钮状态
const formRef = ref(null) // 表单ref

// 表单值
const form = reactive({
  username: 'admin',
  iphone: '13800000000',
  password: '123456',
  againPassword: '123456'
})

// 表单校验
const rules = {
  username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
  iphone: [{ required: true, trigger: 'blur', message: '手机号不能为空' }],
  password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
  againPassword: [{ required: true, trigger: 'blur', message: '确认密码不能为空' }]
}

// 注册
const handleRegister = () => {
  formRef.value.validate(valid => {
    if(valid) {
      loading.value = true
      // 发送注册请求。。。
      setTimeout(() => {
        emit('change', 'login')
        loading.value = false
      }, 1000)
    }else {
      console.log('error submit!!')
      return false
    }
  })
}


</script>

<style lang="less" src="./index.less" module="styles">
</style>
